<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>昵称管理</title>
    <link rel="stylesheet" href="../assets/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../assets/style/admin.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <script src="../assets/layui/layui.js"></script>
    <script src="../assets/js/common.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script src="../common/header.js"></script>
    <!-- 内容主体区域 -->
    <div id="LAY_app_body">
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            昵称管理&nbsp;&nbsp;
                            <a class="layui-btn layui-btn-sm" href="edit.html">添加</a>&nbsp;&nbsp;
                            <a href="javascript:importLayer();" class="layui-btn layui-btn-sm">上传昵称</a>&nbsp;&nbsp;
                            <button class="layui-btn layui-btn-sm layui-btn-danger" onclick="batchUpdateStatus()">重置为未使用</button>&nbsp;&nbsp;
                            <button class="layui-btn layui-btn-sm layui-btn-danger" onclick="batchDelete()">清空</button>
                            <button class="layui-btn layui-btn-sm layui-btn-sm" onclick="batchUpdateReuse(1)">全部重复使用</button>
                            <button class="layui-btn layui-btn-sm layui-btn-danger" onclick="batchUpdateReuse(0)">全部不重复使用</button>
                        </div>
                        <div class="layui-card-body">
                            <div class="layui-row">
                                <select id="status" style="position: relative;float: right;" onchange="reloadList()">
                                    <option value="1">启用的</option>
                                    <option value="0">禁用的</option>
                                    <option value="-1">全部</option>
                                </select>&nbsp;&nbsp;
                            </div>
                            <table id="LAY-user-chat-room" lay-filter="LAY-user-chat-room"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        var uploading = false;
        var importLayer;
        var reloadList;
        var batchUpdateStatus;
        var batchDelete;
        var batchUpdateReuse;
        var del;
        layui.use(['table', 'element', 'laytpl', 'form', 'upload'], function(){
            var $ = layui.$
                ,layer = layui.layer
                ,table = layui.table
                ,form = layui.form
                ,laytpl = layui.laytpl
                ,element = layui.element
                ,upload = layui.upload;

            element.init();

            var status = $('#status').find("option:selected").val();
            //第一个实例
            table.render({
                elem: '#LAY-user-chat-room'
//            ,height: 315
                ,url: '/user_wechat_nickname/list_data' //数据接口
                ,where: {//设定异步数据接口的额外参数
                    status: status
                }
                ,page: true //开启分页
                ,cols: [[ //表头
                    {type: 'numbers', title: '序号', fixed: 'left'}
                    ,{field: 'name', title: '昵称', fixed: 'left'}
                    ,{field: 'status', title: '重复使用', sort: true, width:100, templet: '#reuseTpl'}
                    ,{field: 'created', title: '添加时间'}
                    ,{field: 'use_date', title: '设置时间', hide:true}
                    ,{field: 'modified', title: '最后更新时间', hide:true}
                    ,{field: 'status', title: '状态', templet: '#statusTpl', unresize: true}
                    ,{fixed: 'right', width:150, align:'center', toolbar: '#barDemo'}
                ]]
                ,title: '列表'
//            ,toolbar: '#toolbarDemo'
//            ,defaultToolbar: ['filter']
            });

            importLayer = function () {
                var board_html = tpl_import.innerHTML;
                layer.open({
                    type: 1,
                    area: '600px',
                    title: '上传文件',
                    closeBtn: 0,
                    shadeClose: true,
                    content: board_html,
                    btn: ['提交', '取消'],
                    success: function (layero, index) {
                        form.render();
                        var demoListView = $('#test-upload-demoList')
                            ,uploadListIns = upload.render({
                            elem: '#test-upload-testList'
                            ,url: '/user_wechat_nickname/upload'
                            ,field: 'qrcode'
                            ,acceptMime: 'text/plain'
                            ,accept: 'file'
                            ,exts: 'txt'
                            ,number: 1
                            ,size: 2048*8
                            ,multiple: true
                            ,auto: true
//                        ,bindAction: '#test-upload-testListAction'
                            ,choose: function(obj){
                                var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                                //读取本地文件
                                obj.preview(function(index, file, result){
                                    var tr = $(['<tr id="upload-'+ index +'">'
                                        ,'<td>'+ file.name +'</td>'
                                        ,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
                                        ,'<td>等待上传</td>'
                                        ,'<td>'
                                        ,'<button class="layui-btn layui-btn-xs test-upload-demo-reload layui-hide">重传</button>'
                                        ,'<button class="layui-btn layui-btn-xs layui-btn-danger test-upload-demo-delete">删除</button>'
                                        ,'</td>'
                                        ,'</tr>'].join(''));

                                    //单个重传
                                    tr.find('.test-upload-demo-reload').on('click', function(){
                                        obj.upload(index, file);
                                    });

                                    //删除
                                    tr.find('.test-upload-demo-delete').on('click', function(){
                                        delete files[index]; //删除对应的文件
                                        tr.remove();
                                        uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                                    });

                                    demoListView.append(tr);
                                });
                            }
                            ,done: function(res, index, upload){
                                if(res.code == 0){ //上传成功
                                    var tr = demoListView.find('tr#upload-'+ index)
                                        ,tds = tr.children();
                                    var html = '<input type="hidden" id="upload_origin_'+index+'" name="origins[]" value="'+res.origin+'"><input type="hidden" id="upload_ready_'+index+'" name="qrcodes[]" value="'+res.value+'">';
                                    tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>'+html);
//                                tds.eq(3).html(''); //清空操作
                                    tds.eq(3).find('.test-upload-demo-reload').addClass('layui-hide'); //显示重传
                                    return delete this.files[index]; //删除文件队列已经上传成功的文件
                                }
                                this.error(index, upload);
                            }
                            ,error: function(index, upload){
                                var tr = demoListView.find('tr#upload-'+ index)
                                    ,tds = tr.children();
                                tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                                tds.eq(3).find('.test-upload-demo-reload').removeClass('layui-hide'); //显示重传
                            }
                        });
                    },
                    yes: function(index, layero){
                        var data = new FormData($('#uploadForm')[0]);

                        if(uploading){
                            layer.msg("正在提交数据，请稍候", {icon: 5});
                            return false;
                        }
                        $.ajax({
                            type: "POST",
                            url: "/user_wechat_nickname/save",
                            data: data,
                            cache: false,
                            contentType: false,
                            processData: false,
                            beforeSend: function(){
                                uploading = true;
                            },
                            success:function(response){
                                var dataObj=$.parseJSON(response);
                                if (dataObj.code === 0) {
                                    layer.msg(dataObj.msg, {icon: 6});
                                    layer.close(index);
                                    setTimeout(function(){
                                        reloadList();
                                    }, 1000);
                                } else {
                                    layer.msg(dataObj.msg, {icon: 5});
                                }
                                uploading = false;
                            },
                            error: function (request, status, error) {
                                layer.msg('哦噢，网络开小差了', {icon: 5});
                                uploading = false;
                            }
                        });
                    }
                    ,btn2: function(index, layero){
                        setTimeout(function(){
                            reloadList();
                        }, 1000);
                    }
                });
            };

            //监听状态操作
            form.on('switch(reuseDemo)', function(obj){
                var reuse = 0;
                if (obj.elem.checked) {
                    reuse = 1;
                }
                var id = this.step;
                var post = {
                    id: id,
                    reuse: reuse
                };
                $.ajax({
                    type: "POST",
                    url: "/user_wechat_nickname/changeReuse",
                    data: post,
                    success:function(response){
                        var dataObj = $.parseJSON(response);
                        if(dataObj.code == 0) {
                            layer.tips('修改成功', obj.othis);
                        } else if(dataObj.code == -1) {
                            layer.tips(dataObj.msg, obj.othis);
                        } else {
                            layer.msg(dataObj.msg, {icon: 5});
                        }

                        setTimeout(function(){
                            reloadList();
                        }, 1000);
                    },
                    error: function (request, status, error) {

                    }
                });
                return false;
            });

            reloadList = function () {
                var status = $('#status').find("option:selected").val();
                table.reload('LAY-user-chat-room', {
                    where: { //设定异步数据接口的额外参数，任意设
                        status: status
                    },
                    page: {
//                    curr: 1 //重新从第 1 页开始
                    }
                });
            };

            batchUpdateStatus = function () {
                layer.confirm('确认要重置吗？', function(index){
                    var post = {
                        status: 2,
                        new_status: 1
                    };
                    $.ajax({
                        type: "POST",
                        data: post,
                        url: "/user_wechat_nickname/batchUpdateStatus",
                        success:function(response){
                            var dataObj = $.parseJSON(response);
                            if(dataObj.code == 0) {
                                layer.msg(dataObj.msg, {icon: 1});
                            } else {
                                layer.msg(dataObj.msg, {icon: 5});
                            }

                            setTimeout(function(){
                                reloadList();
                            }, 1000);
                        },
                        error: function (request, status, error) {

                        }
                    });
                    layer.close(index);
                });
            };

            batchDelete = function () {
                layer.confirm('确认要清空吗？', function(index){
                    var post = {
                        del: 1
                    };
                    $.ajax({
                        type: "POST",
                        data: post,
                        url: "/user_wechat_nickname/batchDelete",
                        success:function(response){
                            var dataObj = $.parseJSON(response);
                            if(dataObj.code == 0) {
                                layer.msg(dataObj.msg, {icon: 1});
                            } else {
                                layer.msg(dataObj.msg, {icon: 5});
                            }

                            setTimeout(function(){
                                reloadList();
                            }, 1000);
                        },
                        error: function (request, status, error) {

                        }
                    });
                    layer.close(index);
                });
            };

            batchUpdateReuse = function (reuse) {
                var msg = '';
                if (reuse == 1) {
                    msg = '全部重复使用';
                }else {
                    msg = '全部不重复使用';
                }
                layer.confirm('确认要设置'+msg+'吗？', function(index){
                    var post = {
                        reuse: reuse,
                    };
                    $.ajax({
                        type: "POST",
                        data: post,
                        url: "/user_wechat_nickname/batchUpdateReuse",
                        success:function(response){
                            var dataObj = $.parseJSON(response);
                            if(dataObj.code == 0) {
                                layer.msg(dataObj.msg, {icon: 1});
                            } else {
                                layer.msg(dataObj.msg, {icon: 5});
                            }

                            setTimeout(function(){
                                reloadList();
                            }, 1000);
                        },
                        error: function (request, status, error) {

                        }
                    });
                    layer.close(index);
                });
            };

            del = function (id) {
                layer.confirm('确认要删除吗？', function(index){
                    var post = {
                        del: 1,
                        id: id
                    };
                    $.ajax({
                        type: "POST",
                        data: post,
                        url: "/user_wechat_nickname/delete",
                        success:function(response){
                            var dataObj = $.parseJSON(response);
                            if(dataObj.code == 0) {
                                layer.msg(dataObj.msg, {icon: 1});
                            } else {
                                layer.msg(dataObj.msg, {icon: 5});
                            }

                            setTimeout(function(){
                                reloadList();
                            }, 1000);
                        },
                        error: function (request, status, error) {

                        }
                    });
                    layer.close(index);
                });
            };
        });
    </script>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs layui-btn-normal" href="/v1/user_wechat_nickname/edit/{{d.id}}">编辑</a>
        <button class="layui-btn layui-btn-sm layui-btn-warm" onclick="del({{d.id}});">删除</button>
    </script>
    <script type="text/html" id="statusTpl">
        {{# if(d.status == 0){ }}
        <span style="color: red;">禁用</span>
        {{# } else if(d.status == 1){ }}
        <span style="color: green;">可用</span>
        {{# } else if(d.status == 2){ }}
        <span style="color: blue;">已用</span>
        {{# } }}
    </script>
    <script id="tpl_import" type="text/html">
        <form id="uploadForm" class="layui-form" action="" enctype="multipart/form-data">
            <div class="layui-row" style="padding: 10px;height:300px;max-height: 400px;overflow: hidden;overflow-y: auto;">
                <div class="layui-upload">
                    <button type="button" class="layui-btn layui-btn-normal" id="test-upload-testList">上传昵称文件</button><input class="layui-upload-file" type="file" accept="undefined" name="file" multiple="">
                    <div class="layui-upload-list">
                        <table class="layui-table">
                            <thead>
                            <tr><th>文件名</th>
                                <th>大小</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr></thead>
                            <tbody id="test-upload-demoList"></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </form>
    </script>
    <script id="tpl_preview" type="text/html">
        <input type="hidden" id="id" name="id" value="{{d.id}}">
        <table class="layui-table" lay-size="sm">
            <tbody>
            {{#  layui.each(d.previewData, function(index, rows){ }}
            <tr>
                {{#  layui.each(rows, function(index, item){ }}
                <td>{{item}}</td>
                {{#  }); }}
            </tr>
            {{#  }); }}
            </tbody>
        </table>
    </script>

    <script type="text/html" id="reuseTpl">
        <input type="checkbox"  name="reuse" step="{{d.id}}" value="{{d.reuse}}" lay-skin="switch" lay-text="是|否" lay-filter="reuseDemo" {{ d.reuse == 1 ? 'checked' : '' }}>
    </script>
</div>
</body>
</html>
